<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Topo Page</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/topoPageCSS.css">
</head>
<body>
    <!--定义页面头部-->
    <header>
        <div class="logo">
            <img src="images/logo.jpg">
        </div>
        <ul>
            <li class="tab topo"><a href="topoPage.html">拓扑展示</a></li>
            <li class="tab statistic"><a href="statisticPage.html">统计数据展示</a></li>
        </ul>
        <!--再做一个调整速度的下拉菜单-->
    </header>

    <div class="displayContainer">
        <!--定义页面左栏-->
        <div class="leftSide">
            <button class="selectPath btn btn-default btn-lg">选择源目路径<span class="glyphicon glyphicon-plus"></span>
            </button>
            
            <div class="pathSelections">
                <!--dynamically be created-->
                
                <div class="pathOption">
                    <div class="sToD">
                        <span class="src">src</span>
                        <span class="arrow glyphicon glyphicon-arrow-right"></span>
                        <span class="dest">dest</span>
                        <select>
                            <option>0</option>
                            <option>1</option>
                        </select>
                        <input type="color" name="colorSelector">
                        
                    </div>
                    <div class="delete">
                        <span class="glyphicon glyphicon-remove"></span>
                    </div>
                </div>
                
            </div>

            <div class="timeDisplay">
                <p>
                    <span class="time">0.0000000</span>
                    <span class="timeUnit">秒</span>
                </p>
            </div>
        </div>

        <!--定义页面topo展示模块-->
        <div class="display">
            <div class="controlUnits">
                <button class="run btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-play"></span>
                </button>
                <button class="pause btn btn-default btn-lg">  
                    <span class="glyphicon glyphicon-pause"></span>
                </button>
                <button class="stop btn btn-default btn-lg">
                    <span class="glyphicon glyphicon-stop"></span>
                </button>
                
                <div class="progressBar">
                  <!--进度条怎么做-->
                </div>
            </div>
            
            <div class="topoDisplay" id="topoDisplay">
                <!--为svg预留-->
            </div>
        </div>
    </div>

    <script src="./libs/d3.js"></script>
    <script src="./javascripts/jquery.min.js"></script>
    <script src="./javascripts/drawTopo.js"></script>
</body>
</html>
